import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import _ from 'lodash';
import $ from 'jquery';
import FloatLayout from '../../components/float-layout'

import { Table, Icon, Tag, Form,  Button, message, Modal, Input} from 'antd';
import {
  fetchOrderSpecial,
  fetchOrderRelatedData,
  API_URL
} from '../../store/actions';
import SearchInput from '../../components/search-input';
class _pane1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            user: this.props.user,
            data: this.props.data
        };
    }
    componentWillReceiveProps(nextProp){
        this.setState({
            data: nextProp.data
        })
    }
    showDetail1(e){
        e.preventDefault();
        const id = e.target.id;
        this.props.showDetail(id)
    }
    render(){
        const rowSelection = {
            /*onChange(selectedRowKeys, selectedRows) {
             console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
             },
             onSelect(record, selected, selectedRows) {
             console.log(record, selected, selectedRows);
             },
             onSelectAll(selected, selectedRows, changeRows) {
             console.log(selected, selectedRows, changeRows);
             }*/
        };


        const columns = [{
            title: '检查',
            dataIndex: 'check_item_name',
        }, {
            title: '患者姓名',
            dataIndex: 'patientname',
        }, {
            title: '创建时间',
            dataIndex: 'create_time'
        },{
            title: '服务类型',
            dataIndex: 'productname',
        }, {
            title: '价格(元)',
            dataIndex: 'price',
        },  {
            title: '状态',
            dataIndex: 'status',
            render(text){
                switch (text){
                    case 0:
                        return <span style={{color:'red'}}>未付款</span>;
                    case 1:
                        return <span style={{color:'#ff6600'}}>待处理</span>;
                    case 2:
                        return <span style={{color:'#333'}}>处理中</span>;
                    case 3:
                        return <span style={{color:'green'}}>交易完成</span>;
                    default:
                        return <span style={{color:'#ccc'}}>未知状态</span>;
                }
            }
        }, {
            title: '操作',
            dataIndex: 'id',
            render: (text, record) => (
              <span>
                <a href="#" onClick={this.showDetail1.bind(this)}  id={record.id}>详情</a>
              </span>
            )
        }];
        const pagination = {
            total: this.state.data.length,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {
                /*console.log('Current: ', current, '; PageSize: ', pageSize);*/
            },
            onChange(current) {
                /*console.log('Current: ', current);*/
            }
        };
        return (
          <div>
              <Table
                pagination={pagination}
                columns={columns}
                rowSelection={rowSelection}
                dataSource={this.state.data}
              />
          </div>
        )
    }
}
class _SubscribeList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data:[],
            orderDetail:null,
            showDetail:false
        };
    }
    componentWillMount(){
        const _this =this;
        _this.props.dispatch(fetchOrderSpecial(2,{},function(res){
            _this.setState({
                data:res.content.list
            })
        }))
    }
    componentDidMount(){}
    showDetail(id){
        const _this = this,
          order = _.filter(_this.state.data,o=>{
              return o.id == id
          })[0];
        _this.props.dispatch(fetchOrderRelatedData(order,function(data){
            const _d = Object.assign({},data,{order:order});
            _this.setState({
                orderDetail:_d,
                showDetail:true
            })
        }))
    }
    shutDetail(){
        this.setState({
            orderDetail:null,
            showDetail:false
        })
    }
    willOpen(n){
        console.info('在父元素中将要打开浮动层',n)
    }
    viewPacs(e){
        e.preventDefault();
        window.open(
          this.state.orderDetail.mp,
          'viewer',
          'location=no,toolbar=no,alwaysRaised=yes,screenX=0,screenY=0'
        );
    }
    render(){
        let _od = '未找到订单',
          orderDetail = this.state.orderDetail;
        if(orderDetail){
            const order = orderDetail.order,
              patient = orderDetail.patient,
              study = orderDetail.study,
              token = this.props.user.accessToken;
            let attachments = _.map(orderDetail.attachments,o=>{
                return (
                  <img
                    style={{width:'100px'}}
                    key={`${o.id}`}
                    title={`${o.name}`}
                    src={`${API_URL}attachment/${o.id}?accessToken=${token}`}
                  />)
            })
            _od = (
              <div id="orderContent" className="detailList">
                  <h2>订单信息</h2>
                  <ul className="label-list">
                      <li><label>订单类型</label>{order.productname}</li>
                      <li><label>创建时间</label>{order.create_time || '--'}</li>
                      <li><label>预约时间</label>{order.begintime || '--'}</li>
                      <li><label>预约时长</label>{order.duration || '--'}</li>
                      <li><label>支付金额</label>{order.price}</li>
                  </ul>
                  <h2>患者信息</h2>
                  <ul className="label-list">
                      <li><label>患者姓名</label>{patient.name || '--'}</li>
                      <li><label>患者性别</label>{patient.gender == 'F'?'女':(patient.gender == 'M'?'男':'--')}</li>
                      <li><label>患者年龄</label>{patient.age || '--'}</li>
                      <li><label>患者生日</label>{patient.birthday || '--'}</li>
                      <li><label>过往病史</label>{patient.medical_history || '--'}</li>
                      <li><label>联系方式</label>{patient.mobile || '--'}</li>
                  </ul>
                  <h2>检查信息</h2>
                  <ul className="label-list">
                      <li><label>设备类型</label>{study.modality || '--'}</li>
                      <li><label>检查部位</label>{study.bodypart || '--'}</li>
                      <li><label>检查项目</label>{study.check_item_name}</li>
                      <li><label>检查日期</label>{study.studydate || '--'}</li>
                      <li><label>检查时年龄</label>{study.patientage || '--'}</li>
                      <li><label>影像号</label>{study.study_instance_uid || '--'}</li>
                      <li><label>影像</label><a href="#" onClick={this.viewPacs.bind(this)}>查看影像</a></li>
                      <li><label>检查号</label>{study.accession_number || '--'}</li>
                      <li><label>检查机构</label>{study.institution || '--'}</li>
                      <li><label>症状描述</label>{study.symptom || '--'}</li>
                      <li><label>临床诊断</label>{study.diagnosis || '--'}</li>
                      <li><label>其他单据</label>{attachments}</li>
                  </ul>
              </div>
            )
        }
        return (
          <div>
              <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
                  <div style={{float:'left'}}>
                    <SearchInput style={{ width: 200 }} placeholder='请输入关键字查询' />
                  </div>
              </div>
              <_pane1
                data={this.state.data}
                user={this.props.user}
                dispatch={this.props.dispatch}
                showDetail={this.showDetail.bind(this)}
              />
              <FloatLayout
                show={this.state.showDetail}
                top={61}
                title='订单详情'
                willOpen={this.willOpen.bind(this)}
              >
                  {_od}
              </FloatLayout>
          </div>
        )
    }
}
let SubscribeList;
export default SubscribeList = connect((state)=>{
    const {user} = state.rootReducer;
    return {user}
})(_SubscribeList)

